<template>
  <div class="associatedimages">
    <div class="imagelist" ref="imageliscroll">
      <template>
        <div class="imageitem" v-for="item in hotwordimagelist" :key="item.id">
          <div class="imageb" @click="removeimg(item)" v-hasPermi="['base:labelImage:remove']">
            <img class="imageinfo" :src="item.url" alt="item.url" />
            <div class="hoverbackground">
              <img class="icon" src="~@/assets/images/scljt_icon.svg" alt="inhh" />
            </div>
          </div>
          <div>{{ item.createTime }}</div>
          <div class="imagesize">{{ item.size }}K</div>
        </div>
      </template>
      <el-empty description="暂无数据" v-show="shownodata"></el-empty>
    </div>
    <el-upload
      action="#"
      accept=".jpeg, .jpg, .png"
      multiple
      :on-change="uploadImg"
      :before-upload="upSucc"
      :auto-upload="false"
      :file-list="fileList"
      :show-file-list="false"
      :on-success="(response, file, fileList) => {
          return handleSuccess(response, file, fileList, scope.row);
        }
      "
      v-hasPermi="['base:labelImage:add']"
    >
      <SubBtn>
        <template slot="btn">
          <div class="left">共 87 张图片</div>
          <div class="bottomBtn">
            <el-button round type="primary" class="addBtn">上传图片</el-button>
          </div>
        </template>
      </SubBtn>
    </el-upload>
  </div>
</template>

<script>
import {
  getlabelImageGetInfoApi,
  getlabelImageListApi,
  getlabelImageaddApi,
  getlabelImageRemoveApi
} from "@/wss/newApi_3-24/officewebsite/labelImage.js";
import SubBtn from "@/wss/components/subBtn.vue";
import debounce from "lodash/debounce";

export default {
  components: {
    SubBtn
  },
  props: {
    selectItem: Number
  },
  data() {
    return {
      // 分页参数
      pageing: { pageNum: 1, pageSize: 50, total: 0 },
      // 热词图片数组
      hotwordimagelist: [],
      id: 0,
      pageNum: 0,
      imagelist: [],
      fileList: [], //上传文件列表
      upType: false,
      shownodata: false //是否展示无数据状态
    };
  },
  async mounted() {
    //this.pageing.pageNum == 1;
    // this.goHotwordimagelist();
  },
  methods: {
    async goHotwordimagelist(id) {
      console.log("关联图片", id);
      this.id = id;
      this.pageing.pageNum = 1;
      this.gethotwordimagelist();
    },
    // 获取热词图片列表
    async gethotwordimagelist() {
      this.shownodata = false;
      console.log(this.pageing.pageNum);
      if (this.pageing.pageNum == 1) {
        this.hotwordimagelist = [];
      }
      const { pageNum, pageSize } = this.pageing;
      let { rows, code, total } = await getlabelImageListApi({
        labelId: this.id,
        pageNum: pageNum,
        pageSize: pageSize
      });
      //console.log(rows);
      if (code == 200) {
        //console.log(JSON.stringify(this.hotwordimagelist));
        //console.log(JSON.stringify(rows));
        //this.hotwordlist.filter(item => Boolean(item))
        // rows.forEach(rowsitem => {
        //   this.hotwordimagelist.filter(item => item.id != rowsitem.id);
        // });
        //console.log(rows);

        // hotwordimagelist.forEach(item => {
        //   rows.filter(rowsitem => rowsitem.id != item.id);
        // });
        //console.log(JSON.stringify(this.hotwordimagelist));

        //this.hotwordimagelist.filter(item => Boolean(item));
        this.hotwordimagelist = rows;
        //this.hotwordimagelist = [...this.hotwordimagelist, ...rows];
        this.pageing.total = total;
      }
      console.log(this.pageing.total);
      if (this.pageing.total <= 0) {
        this.shownodata = true;
      } else {
        this.shownodata = false;
      }
      if (code != 200) return;
    },
    // 上传预处理
    // beforeUpload(file) {
    //   console.log(file);
    //   if (file.type.indexOf("image/") == -1) {
    //     this.$modal.msgError(
    //       "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
    //     );
    //   } else {
    //     this.requestUpload(file);
    //   }
    // },
    //添加图片
    // --------------
    upSucc(file) {
      console.log(file, "------------");
    },
    // 上传图片的回调
    uploadImg(file, fileList) {
      console.log(file);
      //上传判断
      const isJPGPNG =
        file.raw.type == "image/jpeg" || file.raw.type == "image/png";
      const isLt1M = file.raw.size / 1024 / 1024 < 0.488;

      if (!isJPGPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        return;
      } else {
        if (!isLt1M) {
          ``;
          this.$message.error("上传头像图片大小不能超过 500KB!");
          return;
        } else {
          // if (fileList && fileList.length > 1) {
          //   fileList.shift();
          // }

          //this.fileList = fileList;
          console.log(file, fileList);
          fileList.forEach((item, index) => {
            if (file == item && index == fileList.length - 1) {
              console.log(index, "进来了");
              this.requestUpload(fileList);
            }
          });
          // this.expert.imageUrl = URL.createObjectURL(file.raw);
        }
      }
    },
    handleSuccess(response, file, fileList, rowInfo) {
      console.log(response, file, fileList, rowInfo);
    },
    //上传图片
    requestUpload: debounce(async function(file) {
      // let formDate = new FormData();
      // formDate.set("name", name);
      // formDate.set("id", id);
      // this.fileList.forEach((item, i) => {
      //   formDate.append(`file`, item.raw);
      // });

      // 通过 FormData 对象上传文件
      let formData = new FormData();

      file.forEach(item => {
        console.log(item.raw, "-----");
        formData.append("file", item.raw);
      });
      formData.append("labelId", this.id);
      let { code, msg } = await getlabelImageaddApi(formData);
      if (code == 200) {
        this.gethotwordimagelist();
        this.$emit("gethotindex");
        this.$emit("update:selectItem", 5);
      }
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });
      this.fileList = [];
    }, 300),
    // async requestUpload(file) {
    //   // let formDate = new FormData();
    //   // formDate.set("name", name);
    //   // formDate.set("id", id);
    //   // this.fileList.forEach((item, i) => {
    //   //   formDate.append(`file`, item.raw);
    //   // });

    //   // 通过 FormData 对象上传文件
    //   let formData = new FormData();

    //   file.forEach(item => {
    //     console.log(item.raw, "-----");
    //     formData.append("file", item.raw);
    //   });
    //   formData.append("labelId", this.id);
    //   let { code, msg } = await getlabelImageaddApi(formData);
    //   if (code == 200) {
    //     this.gethotwordimagelist();
    //     this.$emit("gethotindex");
    //     this.$emit("update:selectItem", 5);
    //   }
    //   if (code != 200) return;
    //   this.$message({
    //     message: msg,
    //     type: "success"
    //   });
    // },
    async removeimg(item) {
      const imageid = item.id;
      let { code, msg } = await getlabelImageRemoveApi(imageid);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });
      this.gethotwordimagelist();
      this.$emit("gethotindex");
    },

    // 滚动到底部加载更多数据
    lazyLoading(e) {
      console.log(e);
      const scrollTop = e.target.scrollTop + 1; // 滚动条滚动时，距离顶部的距离
      const windowHeight = e.target.clientHeight; // 可视区的高度
      const scrollHeight = e.target.scrollHeight; // 滚动条的总高度
      if (scrollTop + windowHeight >= scrollHeight) {
        console.log("滚动条滚动条滚动条滚动条");
        this.pageing.pageNum++;
        let pageCount =
          (this.pageing.total + this.pageing.pageSize - 1) /
          this.pageing.pageSize;
        console.log(pageCount);
        // console.log(this.total);
        console.log(this.pageing.pageNum);
        if (this.pageing.pageNum >= pageCount) return;
        this.gethotwordimagelist();
      }
      // 滚动条到底部
      // if (scrollTop + windowHeight >= scrollHeight) {
      //   console.log("11111");
      //   if (this.pageing.total this.hotwordimagelist.length >= this.pageing.total) {
      //     console.log(this.hotwordimagelist.length, this.pageing.total);
      //     console.log("已超过总数已超过总数已超过总数");
      //     return;
      //   } //获取完了就不用再获取了
      //   console.log("2222");
      //   this.pageing.pageNum++;
      //   this.gethotwordimagelist(); // 获取通知列表
      // }
    },
    removeimageliscroll() {
      console.log("销毁销毁removeimageliscroll");
      this.$refs.imageliscroll.removeEventListener(
        "scroll",
        this.lazyLoading,
        true
      );
    },
    addimageliscroll() {
      this.$refs.imageliscroll.addEventListener(
        "scroll",
        this.lazyLoading,
        true
      );
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.$refs.imageliscroll.addEventListener("scroll", () => {
    //     console.log("scroll", this.$refs.imageliscroll.scrollTop);
    //   });
    // });
    // this.$refs.imageliscroll.addEventListener("scroll", this.lazyLoading, true); // 滚动到底部，再加载的处理事件
  },
  destroyed() {
    // console.log("销毁销毁");
    // this.$refs.imageliscroll.removeEventListener(
    //   "scroll",
    //   this.lazyLoading,
    //   true
    // );
  }
};
</script>

<style scoped>
.associatedimages {
  height: 100%;
}
.imagelist {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  font-size: 12px;
  font-weight: 400;
  color: #333333;
  line-height: 17px;
  position: relative;
  text-align: center;
  margin: -8px;
  align-items: baseline;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 50px;
}
.imageitem {
  width: calc(100% / 3 - 16px);
  margin: 8px;
}
.imagesize {
  color: #909aaa;
}
.imageb {
  border-radius: 10px;
  display: block;
  position: relative;
  margin-bottom: 8px;
}
.hoverbackground {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  opacity: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hoverbackground img {
  width: 34px;
  height: 34px;
}
img.imageinfo {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  display: block;
  cursor: pointer;
}
.imageitem:hover .hoverbackground {
  opacity: 1;
}
.subBtn {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.bottomBtn {
}
.left {
  color: #606e84;
  font-size: 14px;
  line-height: 36px;
}
.el-empty {
  width: 100%;
}
</style>>
